<template>
  <div>
    <h2>合同列表</h2>

    <input v-model="status" placeholder="输入状态（如 active）" />
    <button @click="fetchContracts">搜索</button>

    <ul v-if="contracts.length">
      <li v-for="contract in contracts" :key="contract.id">
        {{ contract.name }} - {{ contract.status }}
      </li>
    </ul>

    <p v-else>没有找到合同。</p>
  </div>
</template>

<script>
import contractService from '@/services/contractService';

export default {
  data() {
    return {
      contracts: [],
      status: ''
    };
  },
  methods: {
    async fetchContracts() {
      try {
        const res = await contractService.getContractsByStatus(this.status);
        this.contracts = res.data;
      } catch (error) {
        console.error('获取合同失败:', error);
        alert('获取合同失败');
      }
    }
  }
};
</script>